<template>
  <el-container>
    <el-main>
      <el-form ref="sysTemplateForm" :model="sysTemplateForm"  label-width="110px">
        <el-col :span="14">
          <el-form-item label="页面类型" prop="pageType">
            <el-col :span="12">
              <el-select v-model="sysTemplateForm.pageType" placeholder="请选择类型">
                <el-option label="专题" :value="Number(1)"/>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="专题标签" prop="tagId" v-if="sysTemplateForm.pageType==1">
            <el-col :span="12">
              <el-select v-model="sysTemplateForm.tagId" placeholder="请选择类型">
                <el-option v-for="item in tagList" :label="item.name" :value="item.id"/>
              </el-select>
            </el-col>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="页面名称" prop="name">
                <el-input v-model="sysTemplateForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
          <el-col :span="12">
          <el-form-item label="页面描述">
            <el-input v-model="sysTemplateForm.description"></el-input>
          </el-form-item>
          </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="背景图">
                <singleUpload :key="Math.random()" :singleUploadTitle='singleUploadTitleTwo' v-model="sysTemplateForm.thumbnial"></singleUpload>
              </el-form-item>
<!--              <div><span style="margin-left: 16px;color: #606266;font-size: 14px;font-weight: 700">背景图</span></div>-->

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="背景颜色" prop="backgroundColor">
                <el-input v-model="sysTemplateForm.backgroundColor" placeholder="例如#000000"></el-input>
              </el-form-item>
            </el-col>
            <colorPicker v-model="sysTemplateForm.backgroundColor" style=" margin-left:20px;margin-top:5px;z-index: 999;"/>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="分享广告语">
                <el-input v-model="sysTemplateForm.shareDescr"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="24">
              <el-form-item label="分享广告图">
                <singleUpload :singleUploadTitle='singleUploadTitle' :key="Math.random()" v-model="sysTemplateForm.shareImage"></singleUpload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item class="addBotton">
              <el-button type="primary" :loading="loading" @click="saveDesigner('sysTemplateForm')">保存新增</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import { EventBus } from '@/api/eventBus'
  import singleUpload from '../../components/Upload/singleUpload'
  import {list} from '../../api/tag'
  import {save} from '../../api/wxPage'

  export default {
    name: 'designer-add',
    data(){
      return{
        loading:false,
        tagList:[],
        singleUploadTitle:'500*400',
        singleUploadTitleTwo:'200*200',
        sysTemplateForm:{
          pageType:1,
          tagId:'',
          backgroundColor:'',
          thumbnial:'',
          name:'',
          description:'',
          shareImage:"",
          shareDescr:""
        }
      }
    },
    methods:{
      loadTag(){
        let params=new URLSearchParams()
        params.append("type",9)
        list(params).then(response=>{
            this.tagList=response.data.data
        })
      },
      saveDesigner(sysTemplateForm){
        this.$refs[sysTemplateForm].validate((valid) => {
            if (valid){
              this.loading = true;
              save(this.sysTemplateForm).then(response=>{
                this.loading=false
                EventBus.$emit('designer-add', response.data)
                this.$store.dispatch('tagsView/delView', this.$route).then(({visitedViews}) => {
                  this.$router.push({
                    path: '/designer/list'
                  })
                })// 关闭当前tab回到列表

              })

            }
        })

      }
    },
    created() {
      this.loadTag()
    },
    components:{singleUpload}
  }
</script>

<style scoped>

</style>
